<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, onMounted, ref } from "vue";
import { useUserStore } from "@/store/user.js";
import { useIndexStore } from '@/store/main'
import { useRouter } from "vue-router";

const userStore = useUserStore()
const radio = ref('linkman')
const activeNames = ref(['1'])
const handleChange = (val) => {
  console.log(val)
}

const indexStore = useIndexStore()

const router = useRouter()
const socket = indexStore.get_socket()
onMounted(() => {
  socket.on('on_add_user', data => {
    userStore.set_inform_list()
  })
})
const tz = () => {
  userStore.set_inform_list()
  router.push('/home/linkman/inform?type=linkman')
}
</script>

<template>
  <div @click="tz"
    class="w-full h-14 p-5 flex items-center hover:bg-gray-200 cursor-pointer justify-between">
    <div>好友通知</div>
    <el-icon>
      <ArrowRight />
    </el-icon>
  </div>
  <div @click="router.push('/home/linkman/inform?type=group')"
    class="w-full h-14 p-5 flex items-center hover:bg-gray-200 cursor-pointer justify-between">
    <div>群通知</div>
    <el-icon>
      <ArrowRight />
    </el-icon>
  </div>
  <div class="flex justify-center m-5 mb-0">
    <el-radio-group v-model="radio" class="">
      <el-radio-button label="好友" value="linkman" />
      <el-radio-button label="群聊" value="group" />
    </el-radio-group>
  </div>
  <div class="p-5 pt-0">
    <el-collapse class="" accordion v-model="activeNames" @change="handleChange">
      <template v-if="radio === 'linkman'" v-for="group in userStore.user.groups">
        <el-collapse-item :name="group.name">
          <template #title>
            <div class="w-full flex justify-between *:m-3">
              <div>{{ group.name }}</div>
              <div>{{ group.members.length }}</div>
            </div>
          </template>
          <template v-for="user in group.members">
            <div class="flex items-center text-[12px] m-5 cursor-pointer">
              <div class="flex items-center">
                <el-avatar :size="50" :src="user.avatar" />
              </div>
              <div class="ml-2">
                <div>{{ user.name }}</div>
                <div>{{ user.bio }}</div>
              </div>
            </div>
          </template>
        </el-collapse-item>
      </template>
      <template v-else-if="radio === 'group'">
        <el-collapse-item title="我创建的群聊" name="创建">
          <template v-for="group in userStore.user.group">
            <div v-if="group.master === userStore.user._id" class="flex items-center text-[12px]">
              <div class="flex items-center">
                <el-avatar :src="group.avater" />
              </div>
              <div class="ml-2">
                <div>{{ group.name }}</div>
                <div>{{ group.bio }}</div>
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="我管理的群聊" name="管理">
          <template v-for="group in userStore.user.group">
            <div v-if="group.admins.includes(userStore.user._id)" class="flex items-center text-[12px]">
              <div class="flex items-center">
                <el-avatar :src="group.avater" />
              </div>
              <div class="ml-2">
                <div>{{ group.name }}</div>
                <div>{{ group.bio }}</div>
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="我加入的群聊" name="加入">
          <template v-for="group in userStore.user.group">
            <div v-if="group.members.includes(userStore.user._id) && group.master !== userStore.user._id"
              class="flex items-center text-[12px]">
              <div class="flex items-center">
                <el-avatar :src="group.avater" />
              </div>
              <div class="ml-2">
                <div>{{ group.name }}</div>
                <div>{{ group.bio }}</div>
              </div>
            </div>
          </template>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>

<style>
.el-radio-button__inner {
  width: 80px !important;
}
</style>